<script setup>
import {
  getAll,
  deleteXin
} from '@/api/XinWen'

import { Edit, Delete } from '@element-plus/icons-vue'
import XinWenEdit from '@/components/XinWenEdit.vue'
import { ref } from 'vue'
const AllXinWen = ref([])
const loading = ref(false)
const xinWenEdit = ref()

const getAllXinWen = async() => {
  loading.value = true
  const res = await getAll()
  // console.log(res.data);
  AllXinWen.value = res.data
  loading.value = false
  // console.log(AllXinWen.value);
}
// 一进页面就调取数据
getAllXinWen()

const OnSuccess = () => {
  getAllXinWen()
}
const onEdit = (row) => {
  // console.log(row, $index);
  xinWenEdit.value.open(row)
}
const onDel = async(row) => {
  await deleteXin(row.id)
  getAllXinWen()
}
// 弹出新增弹窗
const onAdd = () => {
  xinWenEdit.value.open({})
}


</script>

<template>
  <page-container title="文章分类">

    <!-- 具名插槽 -->
    <template #extra>
      <el-button type="primary" @click="onAdd">新增分类</el-button>
    </template>

    <!-- 默认插槽 -->
    <!-- loading效果 -->
    <!-- 哪里需要哪里加 v-loading="loading" -->
    <el-table v-loading="loading" :data="AllXinWen" style="width: 100%" text-align="center">
      <el-table-column type="index" label="序号" width="70"></el-table-column>
      <el-table-column prop="stem" type="text" label="标题" width="125"></el-table-column>
      <el-table-column prop="author" type="text" label="作者" width="125"></el-table-column>
      <el-table-column prop="content" type="text" label="具体内容" width="280"></el-table-column>
      <el-table-column prop="views" label="浏览量" width="100"></el-table-column>
      <el-table-column prop="likeCount" label="喜欢人数" width="100"></el-table-column>
      <el-table-column prop="subjectName" label="类别" width="100"></el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="150"></el-table-column>
      <el-table-column label="操作" width="150">
        <!-- row 就是 每一项: item ， $index 下标 -->
        <template #default="{ row, $index }">
          <el-button :icon="Edit" circle plain type="primary" @click="onEdit(row, $index)"></el-button>
          <el-button :icon="Delete" circle plain type="danger" @click="onDel(row, $index)"></el-button>
        </template>
      </el-table-column>

      <!-- 自定义空数据 -->
      <template #empty>
        <el-empty description="没有数据"></el-empty>
      </template>
      
    </el-table>

    <!-- 弹窗组件 -->
    <XinWenEdit ref="xinWenEdit" @success="OnSuccess"></XinWenEdit>

  </page-container>
</template>

<style lang="scss" scoped>
.page-container {
  min-height: 100px;
  box-sizing: border-box;

  .header-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
</style>